<div class="init-width">
    <transition name="moves">
        <div v-show="flag" class="add-info operate-way">
            <div class="title-info">
                <h4 class="app-title">
                    <span @click="hide"><i class="icon-left back"></i></span>
                    {{deviceName}}
                </h4>
            </div>
            <div class="content-info attr" id="attr-wraaper">
                <div class="overflow-touch">
                    <div v-for="(item, index) in attrList" class="card-wrapper">
                        <div v-if="getRelay(item.cid)" class="card-content">
                            <div class="card-name flex flex-jcb">
                                <span>{{item.name}}</span>
                                <div>
                                    <mt-switch @change="changeSwitch" v-model="switchValue"></mt-switch>
                                </div>
                            </div>
                        </div>
                        <div v-else class="card-content">
                            <div class="card-name flex flex-jcb"><span>{{item.name}}</span><span class="icon-blue">{{item.value}}</span></div>
                            <div :id="item.cid + item.name" :data-cid="item.cid"
                                 v-show="initAttrSlider(item.cid, item.name, item.value, item.perms, item.min,
                                item.max, item.step)" class="div-slider"
                            ></div>
                            <div class="card-num flex flex-jcb">
                                <span class="start">{{item.min}}</span>
                                <span class="end">{{item.max}}</span>
                            </div>
                            <div v-show="isShowInput(item.perms)" class="card-bottom flex flex-jcb">
                                <input @change="changValue($event, item.cid)" :data-cid="item.cid" class="form-control input-value" :value="item.value">
                                <span class="card-icon">
                                    <i @click="resetValue(item.value, item.cid, $event)" class="icon-reset"></i>
                                    <i @click="sendValue($event)" class="icon-send"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</div>
